import React from 'react';

import '@/assets/css/detail.css'


const Component = () =>
{
    //接收跳转参数
    const [searchParams] = React.Router.useSearchParams()

    let [rid, SetRID] = React.useState(searchParams.get('rid') ? searchParams.get('rid') : 0)

    let [room, SetRoom] = React.useState({
        name:'',
        price:'',
        state:'',
        thumb_text:'',
        flag_text:[],
        content: '',
        total: 0,
    })

    React.useEffect(() => {
        RoomData()
    }, [])

    //请求详情
    const RoomData = async () =>
    {
        var result = await React.HTTP.post("/room/info", {rid})

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetRoom(result.data)
    }
    
    const confirm = () =>
    {
        if(!React.Business.id)
        {
            React.error('请先登录', () => {});
            return false
        }

        React.navigate(`room/confirm?rid=${rid}`)
    }

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >{room.name}</React.UI.NavBar>
            
            {room.thumb_text ? <React.UI.Image src={room.thumb_text} width={'100%'} fit="fill" /> : ""}

            <div className="detail_top">
                <div id="intro" className="intro">
                    <div className="title">{room.name}</div>
                    <div className="betwee">
                        <div className="left">
                            {room.flag_text && room.flag_text.map((flag:any, index:any) => <span key={index}>{flag}</span>)}
                        </div>
                        <div className="right">分享</div>
                    </div>
                    <div className="title">{room.content}</div>
                </div>

                <div id="comment" className="comment">
                    <div className="title">评价</div>
                </div>

                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{room.name}</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>15:00 后入住，12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">房间数量：</span>
                        <span>{room.total}</span>
                    </div>
                </div>
            </div>

            <div className="foot-bar">
                <div className="price">
                    ￥{room.price}
                </div>
                <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false: true}>立即预定</React.UI.Button>
            </div>
        </>
    )
}

export default Component